<!--实际开发时请参考deev_M.vue-->
<template>
	<view class="page_all">
		<view class="page_titleArea">
			<view class="page_title_line">
				<view class="page_title_line_left" @click="leftClick()"><image src="../../static/all/back_white.png" style="width:50rpx;height:50rpx;"></image></view>
				<view class="page_title_line_middle">车辆信息</view>
				<view class="page_title_line_left"></view>
			</view>
		</view>
		<view class="page_contentArea" style="background-color:#F7F7F7;">
			<!--查询区域-->
			<view class="line_query_box"> 
				<view class="line_query_input">
					<uni-easyinput prefixIcon="search" v-model="form_query.license" 
												 :styles="styles" :placeholderStyle="placeholderStyle" placeholder="请输入车牌" 
												 @iconClick="getCarList()" @change="getCarList()">
					</uni-easyinput>
				</view>
			</view>
			<!--汽车数据区域-->
			<!--数据块开始-->
			<view class="data_box" v-for="(item,index) in carList" :key="index">
				<view class="list_car_box" style="position:relative;margin-top:0rpx;">
					<view class="list_car_img"><image :src="item.pic" class="car_img"></image></view>
					<view class="list_car_info">
						<view class="list_car_info_line" style="font-size:30rpx;font-weight:900;">品牌：{{item.model}}</view>
						<view class="list_car_info_line">车牌号：{{item.license}}</view>
						<view class="list_car_info_line">换挡方式：{{item.transType}}</view>
						<view class="list_car_info_line">座位数：{{item.siteCount}}</view> 
					</view>
					<view class="list_car_status3" @click="showTimeRange(index)">{{item.text}}</view>
				</view>
				<view class="time_box" v-if="item.text!=null&&item.text!='查看订车时段'">
					<view class="box_L">
						<view class="week_line_box" v-for="(it,idx) in weekList" :key="idx"  @click="setStatusSelect(idx,item.carId)">
							<view :class="statusSelect==idx?'week_line_HL':'week_line'">
								{{idx==0?"今天":it.dateStr}}
							</view>
							<view :class="statusSelect==idx?'red_dot_HL':'red_dot'">
								<image v-if="it.status=='yes'" src="../../static/all/red_dot.png" style="width:20rpx;height:20rpx;">
							</view>
						</view>
					</view>
					<view class="box_R">
						<view v-if="timeRstList.length==0" class="rst_title">暂无预定信息</view>
						
						<view v-if="timeRstList.length>0" class="rst_title">已有预定信息</view>
						<view v-for="(it,idx) in timeRstList" :key="idx" class="rst_line">
							<view class="rst_line_time">开始:{{it.startDate}}	</view>
							<view class="rst_line_time">截止:{{it.endDate}}	</view>
						</view>
						<!-- <view class="rst_line">13:00--17:00</view> -->
					</view>
				</view>
			</view>
			<!--数据块结束-->
			<view class="space_80"></view>
		</view>
	</view>
</template>

<script>
	import utils from "@/utils/business/services.js";
	export default {
		data() {
			return {
				//控件的样式
				placeholderStyle: "color:#A9A9A9;font-size:30rpx",
				styles: {
					disableColor: '#FFF',
					borderColor: '#87CEFA', //文本框边框颜色
				},
				statusSelect: 0, //星期几高亮显示控制变量
				//查询条件
				form_query: {
					license:"", //牌照模糊查询条件
					pageIndex:1,
					pageSize:1000,
				},
				carList: [], //汽车列表（查询结果集）
				
				weekList: [],  //取今天为第一天的一周7天的日期字符串
				timeRstList: [], //某辆车某个日期对应的订车时段集合
				
				//在此之上补充变量
			}
		},
		onLoad(option) {
			this.getCarList();
			this.getNext7days();
			console.log("获取的7天数组==",this.weekList);
		},
		methods: {
			/******************************以下是通用方法*********************************/
			temp(){},
			//顶部导航回退箭头点击触发
			leftClick(){
				utils.pageBack();
			},
			//隐藏系统键盘
			hideKeyboard() {
				uni.hideKeyboard();
			},
			/******************************以上是通用方法*********************************/
			
			/******************************以下是业务方法*********************************/
			//获取以今天是第一天，后面一周（总共7天的日期字符串数组）
			getNext7days(){
				var that=this;
				this.weekList=[];
				for(var i=0;i<7;i++){
					var date=new Date();
					date.setDate(date.getDate()+i);
					var item={};
					item.dateStr=date.toISOString().split('T')[0];
					item.status="no"; //表示是否有对应的订车时间段数据（no：没有    yes：有），默认是没有
					that.weekList.push(item);
				}
			},
			
			//获取汽车列表
			getCarList(){
				var that=this;
				that.carList=[]; //查询结果集初始化
				utils.getCarList(that.form_query).then(res => {
					console.log('根据条件查询汽车列表返回值==',res); 
					if(res.data.status=="success"){
						that.carList=res.data.rows;
						//用于判断折叠显示一周内订车情况的变量text，初始值就是null，不展开情况下赋值 "查看订车时段"
						for(var i=0;i<that.carList.length;i++){
							that.carList[i].text="查看订车时段";
						}
					}
					if(res.data.status=="error"){
						let msg=res.data.message;
						uni.navigateTo({
							url:'/pages/error/error?errorMsg='+msg 
						})
					}
				}).catch(error => {
					uni.navigateTo({
						url:'/pages/error/error?errorMsg='+error
					})
				})
			},
			
			//显示与收起订车时段明细框
			showTimeRange(index){
				var that=this;
				this.getNext7days(); //需要初始化日期数组
				
				console.log("汽车集合索引==",index);
				var tt=that.carList[index]; //变量 tt == 数组每一项索引
				if(tt.text=="查看订车时段"){ //折叠项同一时间只能打开一个
					for(var i=0;i<that.carList.length;i++){
						that.carList[i].text="查看订车时段";
					}
					tt.text="收起" //打开状态下，显示收起
				}else{
					tt.text="查看订车时段"; //收起状态下，显示 “查看订车时段”
				}
				this.statusSelect=0;
				
				//执行查询今天的订车时段逻辑
				var dateStr=this.weekList[0].dateStr;
				var startDate=dateStr+" 00:00:00";
				var endDate=dateStr+" 23:59:59";
				console.log('获取取指定车辆（'+tt.carId+'）在指定的时间段',startDate,"--",endDate);
				//执行查询选中日期的订车时间段逻辑
				var obj={};
				obj.pageSize=1000;
				obj.pageIndex=1;
				obj.carId=tt.carId;
				obj.startDate=startDate;
				obj.endDate=endDate;
				obj.status="running";
				that.getTimeRstList(obj); //调用获取取指定车辆在指定的时间段之内的的订车时间段列表
				
				//补充的：执行看看7天中每天的日期如果有预定，则有个高亮红点儿
				//第1天
				var startDate=that.weekList[0].dateStr+" 00:00:00";
				var endDate=that.weekList[0].dateStr+" 23:59:59";
				var item0={};
				item0.pageSize=1000;
				item0.pageIndex=1;
				item0.carId=tt.carId;
				item0.startDate=startDate;
				item0.endDate=endDate;
				item0.status="running";
				console.log('第1天的调用接口参数==',item0); 
				//调用接口
				utils.listTask(item0).then(res => {
					console.log('第1天订车时间段列表的返回值==',res); 
					if(res.data.status=="success"){
						if(res.data.rows.length>0){
							that.weekList[0].status="yes";
						}
					}
				})
				//第2天
				var startDate=that.weekList[1].dateStr+" 00:00:00";
				var endDate=that.weekList[1].dateStr+" 23:59:59";
				var item1={};
				item1.pageSize=1000;
				item1.pageIndex=1;
				item1.carId=tt.carId;
				item1.startDate=startDate;
				item1.endDate=endDate;
				item1.status="running";
				console.log('第2天的调用接口参数==',item1); 
				//调用接口
				utils.listTask(item1).then(res => {
					console.log('第2天订车时间段列表的返回值==',res); 
					if(res.data.status=="success"){
						if(res.data.rows.length>0){
							that.weekList[1].status="yes";
						}
					}
				})
				//第3天
				var startDate=that.weekList[2].dateStr+" 00:00:00";
				var endDate=that.weekList[2].dateStr+" 23:59:59";
				var item2={};
				item2.pageSize=1000;
				item2.pageIndex=1;
				item2.carId=tt.carId;
				item2.startDate=startDate;
				item2.endDate=endDate;
				item2.status="running";
				console.log('第3天的调用接口参数==',item2); 
				//调用接口
				utils.listTask(item2).then(res => {
					console.log('第3天订车时间段列表的返回值==',res); 
					if(res.data.status=="success"){
						if(res.data.rows.length>0){
							that.weekList[2].status="yes";
						}
					}
				})
				//第4天
				var startDate=that.weekList[3].dateStr+" 00:00:00";
				var endDate=that.weekList[3].dateStr+" 23:59:59";
				var item3={};
				item3.pageSize=1000;
				item3.pageIndex=1;
				item3.carId=tt.carId;
				item3.startDate=startDate;
				item3.endDate=endDate;
				item3.status="running";
				console.log('第4天的调用接口参数==',item3); 
				//调用接口
				utils.listTask(item3).then(res => {
					console.log('第4天订车时间段列表的返回值==',res); 
					if(res.data.status=="success"){
						if(res.data.rows.length>0){
							that.weekList[3].status="yes";
						}
					}
				})
				//第5天
				var startDate=that.weekList[4].dateStr+" 00:00:00";
				var endDate=that.weekList[4].dateStr+" 23:59:59";
				var item4={};
				item4.pageSize=1000;
				item4.pageIndex=1;
				item4.carId=tt.carId;
				item4.startDate=startDate;
				item4.endDate=endDate;
				item4.status="running";
				console.log('第5天的调用接口参数==',item4); 
				//调用接口
				utils.listTask(item4).then(res => {
					console.log('第5天订车时间段列表的返回值==',res); 
					if(res.data.status=="success"){
						if(res.data.rows.length>0){
							that.weekList[4].status="yes";
						}
					}
				})
				//第6天
				var startDate=that.weekList[5].dateStr+" 00:00:00";
				var endDate=that.weekList[5].dateStr+" 23:59:59";
				var item5={};
				item5.pageSize=1000;
				item5.pageIndex=1;
				item5.carId=tt.carId;
				item5.startDate=startDate;
				item5.endDate=endDate;
				item5.status="running";
				console.log('第6天的调用接口参数==',item5); 
				//调用接口
				utils.listTask(item5).then(res => {
					console.log('第6天订车时间段列表的返回值==',res); 
					if(res.data.status=="success"){
						if(res.data.rows.length>0){
							that.weekList[5].status="yes";
						}
					}
				})
				//第7天
				var startDate=that.weekList[6].dateStr+" 00:00:00";
				var endDate=that.weekList[6].dateStr+" 23:59:59";
				var item6={};
				item6.pageSize=1000;
				item6.pageIndex=1;
				item6.carId=tt.carId;
				item6.startDate=startDate;
				item6.endDate=endDate;
				item6.status="running";
				console.log('第7天的调用接口参数==',item6); 
				//调用接口
				utils.listTask(item6).then(res => {
					console.log('第7天订车时间段列表的返回值==',res); 
					if(res.data.status=="success"){
						if(res.data.rows.length>0){
							that.weekList[6].status="yes";
						}
					}
				})
			},
			
			//点击星期
			setStatusSelect(index,carId){
				//debugger;
				this.statusSelect=index;
				var dateStr=this.weekList[index].dateStr;
				var startDate=dateStr+" 00:00:00";
				var endDate=dateStr+" 23:59:59";
				console.log('获取取指定车辆（'+carId+'）在指定的时间段',startDate,"--",endDate);
				//执行查询选中日期的订车时间段逻辑
				var obj={};
				obj.pageSize=1000;
				obj.pageIndex=1;
				obj.carId=carId;
				obj.startDate=startDate;
				obj.endDate=endDate;
				obj.status="running";
				this.getTimeRstList(obj); //调用获取取指定车辆在指定的时间段之内的的订车时间段列表
			},
			
			//获取取指定车辆在指定的时间段之内的的订车时间段列表
			getTimeRstList(obj){
				console.log('获取取指定车辆在指定的时间段之内的的订车时间段列表的接口参数==',obj); 
				var that=this;
				that.timeRstList=[]; //先初始化右侧时间段集合
				utils.listTask(obj).then(res => {
					console.log('获取取指定车辆在指定的时间段之内的的订车时间段列表的返回值==',res); 
					if(res.data.status=="success"){
						var arr=res.data.rows;
						for(var i=0;i<arr.length;i++){
							var obj=arr[i];
							console.log(obj.carLicense+'车辆的已预约时间：开始时间：',obj.startDate,"   截止时间：",obj.endDate);
							var startDate=obj.startDate.substring(0,16);
							var endDate=obj.endDate.substring(0,16);
							var timeRst={};
							timeRst.startDate=startDate;
							timeRst.endDate=endDate;
							that.timeRstList.push(timeRst);
						}
					}
					if(res.data.status=="error"){
						let msg=res.data.message;
						uni.navigateTo({
							url:'/pages/error/error?errorMsg='+msg 
						}) 
					}
				}).catch(error => {
					uni.navigateTo({
						url:'/pages/error/error?errorMsg='+error
					})
				})
			},
			/******************************以上是业务方法*********************************/
			

			
			/*********************在此之上补充方法**********************/
		},
	}
</script>

<style lang="scss">
@import '../../common/css/page.css'; 
@import '../../common/css/list.css';
.data_box{
	width: 720rpx;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	margin-top: 20rpx;
}
.time_box{
	width: 720rpx;
	height: 500rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #ffffff;
	border: 2rpx solid #808080;
	border-radius: 15rpx;
	flex-shrink: 0; /*不可被压缩*/
}
.box_L{
	width: 310rpx;
	height: 490rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #ffffff; /*最终为ffffff*/
	flex-shrink: 0; /*不可被压缩*/
}
.week_line_box{ /*日期行容器*/
	width: 310rpx;
	height: 70rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.week_line{
	width: 240rpx;
	height: 70rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
	font-family: MicrosoftYaHei;
	text-align: center;
	color: #808080;
	line-height: 70rpx;
}
.red_dot{
	width: 70rpx;
	height: 70rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.week_line_HL{ /*星期选中高亮显示*/
	width: 240rpx;
	height: 70rpx;
	background-color: #808080;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
	font-family: MicrosoftYaHei;
	text-align: center;
	color: #ffffff;
	line-height: 70rpx;
}
.red_dot_HL{
	width: 70rpx;
	height: 70rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	background-color: #808080;
}
.box_R{
	width: 400rpx;
	height: 490rpx;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	background-color: #ffffff; /*最终为ffffff*/
	flex-shrink: 0; /*不可被压缩*/
}
.rst_title{
	width: 350rpx;
	height: 100rpx;
	font-size: 36rpx;  
	text-align: left;
	font-family: MicrosoftYaHei;
	line-height: 100rpx;
	color: #808080;
	font-weight: bold;
}
.rst_line{
	width: 350rpx; 
	height: 100rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 12rpx;
	border: 2rpx solid #FFB900;
	margin-top: 20rpx;
}
.rst_line_time{
	width: 330rpx; 
	height: 50rpx;
	font-size: 30rpx;  
	text-align: left;
	font-family: MicrosoftYaHei;
	line-height: 50rpx;
	color: #FFB900;
}
</style>